<template>
	<view>
		<!-- 内容区 -->
		<view class="content">
			
			<!-- logo区域 -->
			<view class="logo">
				<image :src="logoSrc" mode="scaleToFill"></image>
				<view></view>
			</view>
			
			<!-- logo标题 -->
			<view class="title_logo">欢迎注册，羊羊todo</view>
			
			<!-- 输入区域 -->
			<view class="input_box">
				<!-- 账号 -->
				<view class="input_item">
					<view class="input_item_left">
						<image src="@/static/account/login/account.png"></image>
					</view>
					<input type="text" maxlength="20" placeholder="请输入注册账号" placeholder-class="input_placeholder" v-model="username">
				</view>
				
				<!-- 密码 -->
				<view class="input_item">
					<view class="input_item_left">
						<image src="@/static/account/login/password.png"></image>
					</view>
					<input type="password" maxlength="30" placeholder="请输入密码" placeholder-class="input_placeholder" v-model="password">
				</view>
				
				<!-- 再次输入密码 -->
				<view class="input_item">
					<view class="input_item_left">
						<image src="@/static/account/login/password.png"></image>
					</view>
					<input type="password" maxlength="30" placeholder="请重复密码" placeholder-class="input_placeholder" v-model="passwordAgain">
				</view>
				
				<!-- 人机验证 -->
				<view class="verify" :class="{'pass': isVerifyPass}" @click="goToVerify()">
					
					{{isVerifyPass ?  '验证成功': '点击完成验证'}}
				</view>
				
			</view>
			
			<!-- 登录按钮 -->
			<view class="login_btn" @click="loginSubmit">
				<text>注册提交</text>
				<image src="@/static/account/login/enter.png"></image>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import { logoSrc } from '@/global/js/baseUrl.js'
	import { encrypt } from '@/utils/encrypt'

	
	export default {
		data() { 
			return {
				logoSrc,
				isVerifyPass: false,
				username: '',
				password: '',
				passwordAgain: '',
			};
		},
		onLoad() {
			
		},
		methods: {
			// 跳转滑动验证码页
			goToVerify() {
				uni.navigateTo({
					url: '/pages/safe/verify/index',
					events: {
					    // 为指定事件添加一个监听器，监听验证是否通过
					    // acceptIdFromTeacherDet: (data) => {
					    acceptVerifyStatus: data => {
					       console.log(data)
					       console.log('监听器触发')
						   
						   this.isVerifyPass = data
						  
					    }
					},
				})
			},
			// 表单验证
			formValidate() {
				if(!this.username || !this.password || !this.passwordAgain) {
					this.$showToast({
						icon: "none",
						title: "请将信息填写完整"
					})
					return false
				}
				
				if(this.password.length < 6 || this.passwordAgain.length < 6) {
					this.$showToast({
						icon: "none",
						title: "密码不能少于6位字符"
					})
					return false
				}
				
				if(this.password !== this.passwordAgain) {
					this.$showToast({
						icon: "none",
						title: "两次输入的密码不一致"
					})
					return false
				}
				
				if(!this.isVerifyPass) {
					this.$showToast({
						icon: "none",
						title: "请先点击完成验证"
					})
					return false
				}
				
				return true
			},
			// 登录提交
			loginSubmit() {
				
				// 先进行表单验证
				if(!this.formValidate()) return
				
				this.$http_json({
					url: "/api/user/register",
					method: "post",
					data: {
						username: this.username,
						password: encrypt(this.password)
					}
				}).then(result => {
					
					uni.showToast({
					    title: '注册成功',
					});
					
					setTimeout(() => {
						this.$navigateBack()
					}, 1000)
					
				})
				
				
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.logo {
			width: 220rpx;
			height: 220rpx;
			border-radius: 50%;
			overflow: hidden;
			
			margin-top: 70rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		
		.title_logo {
			margin-top: 30rpx;
			font-size: 44rpx;
			color: #617FDE;
			font-weight: 600;
		}
		
		.input_box {
			padding: 0 100rpx;
			// background-color: yellow;
			width: 100%;
			box-sizing: border-box;
			
			.input_item {
				display: flex;
				align-items: center;
				height: 80rpx;
				margin-top: 40rpx;
				
				.input_item_left {
					background-color: #617FDE;
					height: 80rpx;
					width: 80rpx;
					
					border-radius: 40rpx 0 0 40rpx;
					padding-left: 20rpx;
					
					display: flex;
					align-items: center;
					justify-content: center;
					
					image {
						
						
						min-height: 50rpx;
						min-width: 50rpx;
						height: 50rpx;
						width: 50rpx;
					}
				}
				
				input {
					height: 72rpx;
					border-radius: 0 36rpx 36rpx 0;
					width: 100%;
					border: 4rpx solid #617FDE;
					padding: 0 20rpx;
					color: #617FDE;
				}
				
				.input_placeholder {
					color: #C5C9D5;
				}
			}
			
			.verify {
				display: flex;
				align-items: center;
				justify-content: center;
				
				height: 72rpx;
				border-radius: 36rpx;

				border: 4rpx solid #617FDE;
				color: #617FDE;
				
				margin-top: 40rpx;
				
				background-image: linear-gradient(#FAFBFD, #E2E7F4);
				font-size: 30rpx;
				 
			}
			
			.pass {
				border: 4rpx solid #52CBBB;
				color: #52CBBB;
				background-image: linear-gradient(#E5FFFB, #C6F5ED);
			}
		}
	
		.login_btn {
			display: flex;
			align-items: center;
			background-color: #617FDE;
			margin-top: 50rpx;
			color: #FFFFFF;
			letter-spacing: 2rpx;
			height: 80rpx;
			border-radius: 40rpx;
			padding: 0 30rpx 0 40rpx;
			
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		
		.register {
			margin-top: 200rpx;
			font-size: 28rpx;
			
			.left {
				color: #E2E2E2;
			}
			.right {
				color: #617FDE;
			}
		}
	}
</style>
